<template>
  <div class="Box">
    <el-form ref="ruleFormRef" style="max-width: 319px;" label-position="center" label-width="100px" :model="fromData">
      <el-form-item label="昵称:" prop="nickname">
        <el-input v-model="fromData.nickname" />
      </el-form-item>
      <el-form-item label="邮箱:" prop="email">
        <el-input v-model="fromData.email" />
      </el-form-item>
      <el-form-item label="学校:" prop="school">
        <el-select v-model="fromData.schoolId" placeholder="请选择">
          <el-option v-for="item in schoolList" :key="item.schoolId" :label="item.schoolName" :value="item.schoolId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input v-model="fromData.phone" />
      </el-form-item>
      <el-form-item label="性别:" prop="gender">
        <el-select v-model="fromData.gender" placeholder="请选择">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit()">提交信息</el-button>
        <el-button type="success" @click="reset()">重置信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { update } from '@/api/user'
import { getShools } from '@/api/School'
export default {
  data() {
    return {
      fromData: {
        nickname: this.$store.state.user.profile.nickname ? this.$store.state.user.profile.nickname : '',
        email: this.$store.state.user.profile.email ? this.$store.state.user.profile.email : '',
        phone: this.$store.state.user.profile.phone ? this.$store.state.user.profile.phone : '',
        schoolId: '',
        gender: this.$store.state.user.profile.gender ? this.$store.state.user.profile.gender : '',
        userId: this.$store.state.user.profile.userId
      },
      schoolList: []
    }
  },
  mounted() {
    getShools().then(res => {
      this.schoolList = res.data
    })
  },

  methods: {
    onSubmit() {
      update(this.fromData).then(res => {
        if (res.data) {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.$store.dispatch('user/getUser')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    reset() {
      this.fromData = {
        nickname: this.$store.state.user.profile.nickname ? this.$store.state.user.profile.nickname : '',
        email: this.$store.state.user.profile.email ? this.$store.state.user.profile.email : '',
        phone: this.$store.state.user.profile.phone ? this.$store.state.user.profile.phone : '',
        school: '',
        gender: this.$store.state.user.profile.gender ? this.$store.state.user.profile.gender : '',
        userId: this.$store.state.user.profile.userId
      }
    }
  }
}
</script>
<style lang="less" scoped>
.Box {
  margin-top: 40px;
  background-color: #fafafa;
}
/deep/.el-form {
  padding: 10px 0;
}
</style>